<template>
  <a-row>
    <a-col >
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="pageFilter">
            <z-form-item :datas="fieldArr" :form="pageFilter" :gutter="24" :toggle="toggleSearchStatus">
              <a-col :span="8" slot="submit-action">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>

                </a-space>
              </a-col>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>

      <a-card :bordered="false">
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">

            <!--操作-->
            <template slot="action" slot-scope="text, record">
                <a-button type="link" @click="looks(record)" style="padding: 0;margin-right: 5px;">查看</a-button>
                <a-button type="link" @click="Registration(record)" :disabled="isDisabled3" style="padding: 0;margin-right: 5px;">报到登记</a-button>
                  <a-dropdown :trigger="['click']">
                      <a-menu slot="overlay">
                        <a-menu-item key="1">
                          <a-button @click="Overdue(record)" type="link" :disabled="isDisabled4" style="color:black;font-size: 8px">逾期未报到</a-button>
                        </a-menu-item>
                        <a-menu-item key="2">
                          <a-button @click="People(record)" type="link" :disabled="isDisabled2" style="color:black;font-size: 8px">人员未报到</a-button>
                        </a-menu-item>
                        <a-menu-item key="3">
                          <a-button @click="Management(record)" type="link" :disabled="isDisabled" style="color:black;font-size: 8px">处置</a-button>
                        </a-menu-item>
                        <a-menu-item key="4">
                          <a-button @click="Viewresults(record)" type="link" :disabled="isDisabled1" style="color:black;font-size: 8px">查看处置结果</a-button>
                        </a-menu-item>
                      </a-menu>
                      <a-button type="link" style="padding: 0" @click="status(record)">未报到登记<a-icon type="caret-down" /> </a-button>
                  </a-dropdown>
            </template>
          </z-table>
        </div>
      </a-card>


      <AddModal1 ref="addModalId1" />
      <AddModal2 ref="addModalId2" />
      <AddModal3 ref="addModalId3" />
      <AddModal4 ref="addModalId4" />
    </a-col>
  </a-row>
</template>

<script>
import AddModal1 from './modules/OverdueAddModal'
import AddModal2 from './modules/PeopleAddModal'
import AddModal3 from './modules/ManagementAddModal'
import AddModal4 from './modules/ViewAddModal'
import {pageNew} from '@/api/sjsk/reportList.js'
export default {
  components: {
    AddModal1,
    AddModal2,
    AddModal3,
    AddModal4,
  },
  props:{
    departmentId:''
  },
  data() {
    return {
      fieldArr: [
        {label: '姓名', prop: 'name', tagType: 'input', span: 5},
        {label: '身份证', prop: 'identification', tagType: 'input', span: 5},
        {label: '当前状态', prop: 'reportStatus', tagType: 'dict-select', dictCode:'sex', span: 5, toggle: true,dictOptions:[{text:'待报到',value:'1'},{text:'逾期未报到',value:'2'},{text:'未报到',value:'3'},{text:'已处置',value:'4'}]},
      ],


      toggleSearchStatus:true,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      show: false,
      loading: false,
      visible: false,
      reloading: false,
      isDisabled:true,
      isDisabled1:true,
      isDisabled2:true,
      isDisabled3:false,
      isDisabled4:true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          // width:50,
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'identification',
          align: 'center',
          // customRender: text => {
          //   return <j-ellipsis value={text} length={8} />
          // }
        },
        {
          title: '户籍地详址',
          // width:150,
          dataIndex: 'address',
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={9} />
          }
        },
        {
          title: '强戒所',
          dataIndex: 'durgRehabilitatioName',
          align: 'center',
          // width:45
        },
        {
          title: '应报到时间',
          dataIndex: 'reportToTime',
          align: 'center',
        },

        {
          title: '',
          // dataIndex: 'yuqi',
          align: 'center',
          customRender: record => {
            // return <j-ellipsis value={record.reportToTime} length={9} />
            if(new Date()>Date.parse(record.reportToTime)){
              return <a-tag  color="red">已逾期</a-tag>
            }
            else if(Date.parse(record.reportToTime)-new Date() < (86400000*4)&&Date.parse(record.reportToTime)-new Date() >= (86400000*3)){
              return <a-tag  color="orange">近三天</a-tag>
            }
            else if(Date.parse(record.reportToTime)-new Date() < (86400000*3)&&Date.parse(record.reportToTime)-new Date() >= (86400000*2)){
              return <a-tag  color="orange">近两天</a-tag>
            }
            else if(Date.parse(record.reportToTime)-new Date() < (86400000*2)&&Date.parse(record.reportToTime)-new Date() >= 86400000){
              return <a-tag  color="orange">近一天</a-tag>
            }
            else {
              return <a-tag  color="orange">当天</a-tag>
            }
          }
        },

        {
          title: '当前状态',
          dataIndex: 'reportStatus',
          align: 'center',
          // width:70,
          customRender: (text) => {
            const texts1 = text && text.indexOf('1') != -1 ? '待报到' : ''
            const texts2 = text && text.indexOf('2') != -1 ? '逾期未报到' : ''
            const texts3 = text && text.indexOf('3') != -1 ? '未报到' : ''
            const texts4 = text && text.indexOf('4') != -1 ? '已处置' : ''
            const texts = texts1 + texts2 + texts3 + texts4
            return (
              <j-ellipsis value={texts} length={6} />
            )
          }
        },
        {
          title: '操作时间',
          dataIndex: 'updateTime',
          align: 'center',
          // width:60
        },
        {
          title: '操作人',
          dataIndex: 'updateBy',
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={6} />
          }
        },
        {
          title: '操作',
          // width: 195,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        departmentId:''
      },
      pageData: {
      },
      pTitle: "添加季度评估"
    }
  },
  created() { },
  async mounted() {
    // console.log(new Date()>Date.parse("2023-01-11 11:14:00"));
    // let freezeTime='2023-01-12 00:00:00'
    // let presenttime='2023-01-12 11:13:00'
    // let day = new Date(presenttime).getTime() - new Date(freezeTime).getTime();//日期转时间戳
    // let dayCount = (day / 86400000) ;//时间戳获取天数
    // console.log(dayCount)
  },
  watch: {
    // 组织机构树-联动筛选人员列表
    departmentId:{
      // immediate:true,
      handler(val){
        this.pageFilter.departmentId = val
        this.onQuery()
      }
    },
  },
  methods: {
    Registration(record){
      this.$router.push({
        path: '/Registration/index',
        query: {
          id: record.id,
          
        }
      })
    //   if(new Date(record.reportToTime) < (new Date())){ this.isDisabled3 = true }
    //   if(new Date(record.reportToTime) > (new Date())){ this.isDisabled3 = false }
    },
    status(record){
      if(record.reportStatus == 3){ this.isDisabled = false }
      if(record.reportStatus == 4){ this.isDisabled1 = false }
      if( record.reportStatus != 3 && record.reportStatus != 4){ this.isDisabled2 = false }
      if(record.reportStatus !=2){ this.isDisabled4 = false }
      if(record.reportStatus != 3){ this.isDisabled = true }
      if(record.reportStatus != 4){ this.isDisabled1 = true }
      if(record.reportStatus == 4 || record.reportStatus == 3){ this.isDisabled2 = true }
      if(record.reportStatus == 2){ this.isDisabled4 = true }
    },
    looks(record){
      this.$router.push({
        path: '/holographicArchives/index',
        query: {
          id: record.id,
          identityNumber:record.identification
        }
      })
    },
    Overdue(record) {
      // console.log(record);
      this.$refs.addModalId1.show(record)
    },
    People(record) {
      // console.log(record);
      this.$refs.addModalId2.show(record)
    },
    Management(record) {
      // console.log(record);
      this.$refs.addModalId3.show(record)
    },
    Viewresults(record) {
      // console.log(record);
      this.$refs.addModalId4.show(record)
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
      console.log(this.pageData);
    },
    //重置
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        departmentId: this.departmentId
      }
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      // this.loading = true

      pageNew(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },


    // onHistory(record) {
    //   this.$router.push({
    //     path: "/totalEstimate/record",
    //     query: {
    //       personId: record.personId
    //     }
    //   })
    // },




    // onCYX(record) {
    //   uroscopyApi.urge({ businessId: record.id }).then((res) => {
    //     if (res.success) {
    //       this.$message.success(res.message);
    //       this.onQuery()
    //     } else {
    //       this.$message.warning(res.message);
    //     }
    //   });
    // },


    // onCX(record) {
    //   let that = this;
    //   let flowType = ""
    //   if (record.type == 1) flowType = "26" //季度评估审批
    //   if (record.type == 2) flowType = "27" //年度评估审批
    //   if (record.type == 3) flowType = "28" //季度评估补录审批
    //   if (record.type == 4) flowType = "29" //年度评估补录审批
    //   this.$confirm({
    //     title: `还在审批中，确定要撤销吗?`,
    //     okText: "确认",
    //     okType: "danger",
    //     cancelText: "取消",
    //     onOk() {
    //       uroscopyApi.undoApply({ taskId: record.id, type: flowType }).then((res) => { //取消定期访谈审批，审批流程类型24
    //         if (res.success) {
    //           that.$message.success(res.message);
    //           that.onQuery()
    //         } else {
    //           that.$message.warning(res.message);
    //         }
    //       });
    //     }
    //   });
    // },


    // onOut() {
    //   totalEstimate.exportCompEvaluation(this.pageFilter).then(async res => {
    //     const fileName = '待评估人员.xls'
    //     await downLoadFileReader(res, fileName)
    //   })
    // },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },

  },
}
</script>
<style lang="less" scoped>

@import '~@assets/less/common.less';
</style>